import { View, Text } from "@tarojs/components";
import { useDidShow } from "@tarojs/taro";
import { HistoryIcon, PlusIcon } from "@/components/Icons";
import "./record.less";
import { getTodayRecords, delRecord } from "@/request";
import { useState } from "react";
import { TRecord } from "@/types";
import { Empty } from "@/components";
import Taro from "@tarojs/taro";
import RecordItem from "./RecordItem";
export default function Record() {
  const [records, setRecords] = useState<TRecord[]>([]);

  useDidShow(() => {
    handleInit();
  });

  const handleInit = async () => {
    const res = await getTodayRecords();
    setRecords(res);
  };

  const handleDelRecord = async (id) => {
    Taro.showModal({
      content: "确定要删除吗？",
      success: async (res) => {
        if (res.confirm) {
          await delRecord(id).then(() => {
            Taro.showToast({
              title: "删除成功",
            });
            handleInit();
          });
        }
      },
    });
  };

  const handleEdit = (item: TRecord) => {
    Taro.navigateTo({
      url: `/pages/recordadd/index?id=${item._id}&mode=edit`,
    });
  };
  const today = new Date().toLocaleDateString();

  return (
    <View className="record">
      <View className="page-header">
        <Text>{today}</Text>
        <View>
          <HistoryIcon
            type="primary"
            size={1.4}
            onClick={() => {
              Taro.navigateTo({
                url: `/pages/history/index`,
              });
            }}
          />
        </View>
      </View>
      <View className="content">
        {records.length > 0 ? (
          records.map((item) => {
            return (
              <RecordItem
                key={item._id}
                item={item}
                handleDelRecord={handleDelRecord}
                handleEdit={handleEdit}
              />
              // <SwipeableCard
              //   key={item._id}
              //   childCls="record-item"
              //   onDelete={() => handleDelRecord(item._id)}
              //   onClick={() => handleEdit(item)}
              //   style={{ marginBottom: Taro.pxTransform(12) }}
              // >
              //   <ImageCard
              //     img={item.img}
              //     title={item.name}
              //     size={Taro.pxTransform(100)}
              //     showTitle={false}
              //     detailAction={item.motionId}
              //     isCube
              //   />
              //   <View className="record-item-info">
              //     <View className="flex-between">
              //       <View style={{ marginBottom: Taro.pxTransform(8) }}>
              //         {item.name}
              //       </View>
              //       <View className="flex">
              //         <View className="sub">
              //           {getOptionTxt(item.category, CategoryOptions)}
              //         </View>
              //         {item.category !== 1 && (
              //           <View className="sub">
              //             {getOptionTxt(item.group, GroupOptions)}
              //           </View>
              //         )}
              //       </View>
              //     </View>
              //     <View className="record-item-info-detail">
              //       {getFormatRecordValue(item).map((i) => (
              //         <View>{i}</View>
              //       ))}
              //     </View>
              //   </View>
              // </SwipeableCard>
            );
          })
        ) : (
          <Empty text="没有记录哦,快去添加吧！" type="white" />
        )}
      </View>
      <PlusIcon
        type="white"
        size={1.6}
        circle="primary"
        circleSize={3.2}
        onClick={() => {
          Taro.navigateTo({
            url: "/pages/recordadd/index",
          });
        }}
        style={{
          position: "fixed",
          bottom: Taro.pxTransform(60),
          right: Taro.pxTransform(60),
        }}
      />
    </View>
  );
}
